<template>
  <div id="sslist">
    <div>
      <van-search
        v-model="getlistquery.name"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        input-align="center"
      />
    </div>
    <div>
      <van-tabs v-model="active" title-active-color="#333333" title-inactive-color="#808080">
        <van-tab title="待确认"></van-tab>
        <van-tab title="待生效"></van-tab>
        <van-tab title="已生效"></van-tab>
        <van-tab title="全部"></van-tab>
      </van-tabs>
    </div>

    <div class="listview" v-if="active == 0">
      <div v-for="(item,index) of alllist" :key="index">
        <div class="cardview bg-gradual-blue shadow-blur" style @click="todatainfo(item)">
          <div class="cardview-flex1">
            <img src="../../../assets/1575772544.jpg" alt />
          </div>
          <div class="cardview-flex2">
            <p>
              <span>车主姓名：{{item.ownerName}}</span>
            </p>
            <p>
              <span>车牌号：{{item.carPlate}}</span>
            </p>
            <p>
              <span>所在公司：{{item.czrGzdw}}</span>
            </p>
          </div>
          <div class="cardview-flex3">
            <p>{{item.statusName}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="listview" v-if="active == 1">
      <div v-for="(item,index) of alllist" :key="index">
        <div class="cardview bg-gradual-blue shadow-blur" style @click="todatainfo(item)">
          <div class="cardview-flex1">
            <img src="../../../assets/1575772544.jpg" alt />
          </div>
          <div class="cardview-flex2">
            <p>
              <span>车主姓名：{{item.ownerName}}</span>
            </p>
            <p>
              <span>车牌号：{{item.carPlate}}</span>
            </p>
            <p>
              <span>所在公司：{{item.czrGzdw}}</span>
            </p>
          </div>
          <div class="cardview-flex3">
            <p>{{item.statusName}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="listview" v-if="active == 2">
      <div v-for="(item,index) of alllist" :key="index">
        <div class="cardview bg-gradual-blue shadow-blur" style @click="todatainfo(item)">
          <div class="cardview-flex1">
            <img src="../../../assets/1575772544.jpg" alt />
          </div>
          <div class="cardview-flex2">
            <p>
              <span>车主姓名：{{item.ownerName}}</span>
            </p>
            <p>
              <span>车牌号：{{item.carPlate}}</span>
            </p>
            <p>
              <span>所在公司：{{item.czrGzdw}}</span>
            </p>
          </div>
          <div class="cardview-flex3">
            <p>{{item.statusName}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="listview" v-if="active == 3">
      <div v-for="(item,index) of alllist" :key="index">
        <div class="cardview bg-gradual-blue shadow-blur" style @click="todatainfo(item)">
          <div class="cardview-flex1">
            <img src="../../../assets/1575772544.jpg" alt />
          </div>
          <div class="cardview-flex2">
            <p>
              <span>车主姓名：{{item.ownerName}}</span>
            </p>
            <p>
              <span>车牌号：{{item.carPlate}}</span>
            </p>
            <p>
              <span>所在公司：{{item.czrGzdw}}</span>
            </p>
          </div>
          <div class="cardview-flex3">
            <p>{{item.statusName}}</p>
          </div>
        </div>
      </div>
    </div>

    <van-empty image="search" v-if="alllist.length == 0" description="暂无信息" />

    <!-- 通用错误 -->
    <van-empty v-if="messageerr.tongyongerror" image="error" description="错误啦" />
    <!-- 网络错误 -->
    <van-empty v-if="messageerr.networkerr" image="network" description="网络错误" />
    <!-- 搜索提示 -->
    <van-empty v-if="messageerr.searcherr" image="search" description="无数据" />
  </div>
</template>

<script>
import aa from "../../../minxin/turnthepage";
export default {
  data() {
    return {
      active: 0,

      islode: false,

      searchvalue: undefined,
      alllist: "",
      getlistquery: {
        pageNum: 1,
        pageSize: 10,
        name: null,
      },
      messageerr: {
        searcherr: false,
        networkerr: false,
        tongyongerror: false
      }
    };
  },
  mixins: [aa],
  created() {
    this.getlist();
  },
  watch:{
    active:function(e,v){
      this.getlist();
    }
  },
  methods: {
    getlist() {
      let data = {
          pageNum: this.getlistquery.pageNum,
          pageSize: this.getlistquery.pageSize,
          status:this.active
      }

      if (this.getlistquery.name !== null) {
        data.name = this.getlistquery.name
      }
      this.$Api.get("/api/cqhCar/getCarInfo", data).then(res => {
        let data = res.data;
        if (data.data.list !== null) {
          this.alllist = data.data.list;
        }else{
          this.alllist = []
        }

      });
    },

    getlistall() {
      let _vm = this;
      if (this.nodata == true) {
        return;
      } else {
        if (this.gettool == true) {
          _vm.gettool = false;
          let dataa = {
            pageNum: _vm.getlistquery.pageNum + 1,
            pageSize: _vm.getlistquery.pageSize,
            status: _vm.active,
            name: _vm.getlistquery.name
          };
          this.$Api
            .get("/api/cqhCar/getCarInfo", dataa)
            .then(res => {
              _vm.bottomtcp = false;
              _vm.gettool = true;
              if (res.data.code == 200) {
                if (res.data.data.list.length !== 0) {
                  _vm.getlistquery.pageNum = _vm.getlistquery.pageNum + 1;
                  for (let i = 0; i < res.data.data.list.length; i++) {
                    _vm.alllist.push(res.data.data.list[i]);
                  }
                } else {
                  _vm.$dialog.toast({
                    mes: "没有内容了",
                    timeout: 1500
                  });
                  _vm.nodata = true;
                }
              } else {
                _vm.$dialog.toast({
                  mes: res.data.message,
                  timeout: 1500
                });
              }
            })
            .catch(err => {});
        } else {
          return;
        }
      }
    },
    todatainfo(e) {
      let _vm = this;

      if (e.dataStatus !== 0) {
        _vm.$router.push({
          path: "/PersonalCar/Vehicleinquiry/detil",
          query: { id: e.carId, type: 0 }
        });
      } else {
        _vm.$router.push({
          path: "/PersonalCar/Vehicleinquiry/detil",
          query: { id: e.carId, type: 1 }
        });
      }
    },
    onSearch() {
      this.getlist();
    },
    onCancel() {
      this.getlistquery.name = "";
      this.getlistquery.pageNum = 1;
      this.nodata = false;
      this.getlist();
    }
  }
};
</script>


<style  scoped>
.listview {
  padding: 8px 12px;
  background-color: #f5f5f5;
}

.cardview {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0px 1px 2px #ccc;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 8px;
}

.cardview-flex1 {
  flex: 2;
  margin-right: 1rem;
  text-align: center;
}

.cardview-flex1 img {
  width: 7rem;
  height: 7rem;
}

.cardview-flex2 {
  flex: 3;
  line-height: 1.5rem;
}

.cardview-flex3 {
  padding-left: 0.3rem;
  flex: 1;
}

.babass {
  background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588056255268&di=bdc7e44442effe1b75a5b1cb153684f3&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fe01d2d4f683cbc1fe2dc2ea451880b9021f898b4bbd3f-ph6too_fw658)
    no-repeat;
  /* 背景图垂直、水平均居中 */
  background-position: center center;

  /* 背景图不平铺 */
  background-repeat: no-repeat;

  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  /* background-attachment: fixed; */

  /* 让背景图基于容器大小伸缩 */
  background-size: cover;

  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: #464646;
}
</style>
